<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    function click1(e){
        console.log('click1');
        console.log(e);
        e.preventDefault(); // 可以阻止默认行为
        //return false; // react中 事件的回调中使用return false 无法阻止默认行为

        console.log('this: ',this); // this undefined，react默认使用的是严格模式，严格模式下 this指向window的，都是undefined
        // this 指向undefined说明 react事件的回调函数，也是window调用的
    }
    function click2(name,e){
        console.log('name:' ,name);
        console.log('e: ', e);// react中的事件对象e是经过react处理的事件对象
        //这个事件对象比原生的e好用，因为已经做过兼容处理
        // 如果你想获得原生的事件对象e ，通过 react的事件对象.nativeEvent获取
        e.preventDefault();
    }

    /**
     *  on事件={函数名}   函数名就是函数的定义就是函数的引用地址
     * 
     *  react中的onChange事件，实际是原生的oninput事件
     */
    root.render((
        <div>
            <p><a href="http://baidu.com" onClick={click1}>百度</a></p>
            <p><a href="http://jd.com" onClick={(e)=>click2('jd',e)}>京东</a></p>
            <div>
                <input onChange={function(e){
                    console.log('e: ', e);
                }} type="text" name="" id="" ></input>
            </div>
        </div>
    ))
</script>
</html>